<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .hide{display: none;}
    .show{display: block;}
  </style>
</head>
<body>
  <div class="nav">
    <ul>
      <li>
        <a href="##">一级菜单</a>
        <ul class="hide">
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
        </ul>
      </li>
      <li>
        <a href="##">一级菜单</a>
        <ul class="hide">
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
        </ul>
      </li>
      <li>
        <a href="##">一级菜单</a>
        <ul class="hide">
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
        </ul>
      </li>
      <li>
        <a href="##">一级菜单</a>
        <ul class="hide">
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
        </ul>
      </li>
      <li>
        <a href="##">一级菜单</a>
        <ul class="hide">
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
        </ul>
      </li>
      <li>
        <a href="##">一级菜单</a>
        <ul class="hide">
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>
<script>

  var list = document.querySelectorAll(".nav>ul>li");

  // list这个数组中有两个数据，索引只能为0或1
  // 循环的计数器根据数组的长度计算，数组的长度为2，循环只能执行2次，计数器为0和1
  // 什么时候计数器为2，循环结束了，计数器才会为2
  // 循环会立即执行，不会等待任何程序
  // 事件的触发由人控制，当事件被触发时，循环早就已经结束了
  // 所以！在事件内，无法获取循环每次的计数器。只能拿到循环结束后的计数器

  // for(var i=0;i<list.length;i++){
  //   list[i].onclick = function(){
  //     console.log( i );
  //     console.log( list[i] );
  //   }
  // }
  

  // list[0].onclick = function(){
  //   console.log( list[0] );
  // }
  // list[1].onclick = function(){
  //   console.log( list[1] );
  // }
  
  
  // 需要在事件处理函数内，获取到绑定事件的元素
  // 暂时先通过关键字：this

  // 在事件处理函数内，this就是绑定事件的元素
  // list[0].onclick = function(){
  //   console.log( this );
  // }
  // list[1].onclick = function(){
  //   console.log( this );
  // }


  // 在事件处理函数内，this就是绑定事件的元素
  for(var i=0;i<list.length;i++){
    list[i].onclick = function(){
      if(this.children[1].className === "hide"){
        this.children[1].className = "show";
      }else{
        this.children[1].className = "hide";
      }
    }
  }

</script>
</html>